<!--
 * @Descripttion: 查看数据
 * @Author: xiao li
 * @Date: 2020-09-28 15:24:24
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-29 14:09:15
-->

<template>
  <div class="lb-questionnaire-detail">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <div class="pb-lg mb-lg b-1px-b" v-for="(item,index) in tableData" :key="index">
          <div><em class="text-normal">{{index+1}}、</em>{{item.title}}（{{dialogTitle[item.type]}}）<em class="c-warning text-normal" v-if="item.must===1">*</em></div>
          <block v-if="item.type === 1">
            <div class="pt-lg pb-lg" :class="[{'b-1px-t':aindex !== 0}]" v-for="(aitem,aindex) in item.data_text" :key="aindex">
              <div>({{aindex*1+1}})、{{aitem.text}}</div>
              <div class="flex-y-center mb-md" :class="[{'mt-md':bindex===0},{'c-link':bitem.is_select}]"  v-for="(bitem,bindex) in aitem.ans" :key="bindex"><i class="iconfont icongouxuan-weixuanzhong-xianxingyuankuang mr-sm" :class="[{'icongouxuan-xuanzhong-yuankuang':bitem.is_select}]"></i>{{bitem.text}}</div>
          </div>
          </block>
          <block v-if="item.type === 2">
              <div class="flex-y-center mb-md" :class="[{'mt-md':bindex===0},{'c-link':bitem.is_select}]" v-for="(bitem,bindex) in item.data_text" :key="bindex"><div class="flex-y-center "><i class="iconfont icongouxuan-weixuanzhong-xianxingyuankuang mr-sm" :class="[{'icongouxuan-xuanzhong-yuankuang':bitem.is_select}]"></i>{{bitem.text}}</div></div>
          </block>
          <block v-if="item.type === 3">
              <div class="mt-lg mb-lg pd-lg radius-15" style="min-width:422px;border:1px solid #f4f6f8">
                <div style="min-height:110px;white-space: pre-wrap" v-html="item.ans_text"></div>
                <div class="c-caption text-right">{{item.ans_text.length > 200 ? 200 : item.ans_text.length}}/200</div>
              </div>
          </block>
        </div>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex'
export default {
  data () {
    return {
      appPath: '',
      navTitle: '',
      dialogTitle: {
        1: '矩阵单选题',
        2: '联动单选题',
        3: '填空题'
      },
      cur_type: 1,
      tableData: []
    }
  },
  async created () {
    let { id } = this.$route.query
    await this.getDetail(id)
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    })
  },
  methods: {
    /**
     * @method 获取详情
     */
    async getDetail (id) {
      let {code, data} = await this.$api.appointmentUserQueInfo({id})
      if (code !== 200) return
      this.tableData = data
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-questionnaire-detail {
  width: 100%;
  .page-main{
    padding-left: 30px;
    .iconfont{
      font-size: 20px;
    }
  }
}
</style>
